<template>
	<view class="">
		<uni-popup ref="popup" type="bottom" background-color="#fff" borderRadius="20rpx 20rpx 0 0">
			<view class="popup-wrap">
				<view class="title">
					日期选择
					<image :src="$img_path('/course/close_popup.png')" mode="widthFix"></image>
				</view>
				<view class="datetime-box">
					<view class="old-time select-date">
						<view class="title">
							<!-- 每月最多选择5天 -->
							{{$dayjs().format('YYYY年MM月')}}
						</view>
						<view class="week-box">
							<view class="w-i">
								周日
							</view>
							<view class="w-i">
								周一
							</view>
							<view class="w-i">
								周二
							</view>
							<view class="w-i">
								周三
							</view>
							<view class="w-i">
								周四
							</view>
							<view class="w-i">
								周五
							</view>
							<view class="w-i">
								周六
							</view>
						</view>
						<view class="date-item">
							<view class="item" 
							:class="[
								dateVlaue.length>0&&dateVlaue[0]==index ?'select s_start':'', 
								dateVlaue.length>0&&dateVlaue[1]==index ?'select s_end':'',
								index>dateVlaue[0]&&index<dateVlaue[1] ? 's_center' : ''
							]" v-for="(item,index) in DateList" 
							:key="index" 
							@click="checkDay(item,index)">
								<text>{{item.text}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="btn-box">
					<button @click="confirm">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>	

<script>
	export default {
		name:'datetime',
		data(){
			return {
				DateList:[],
				dateVlaue:[]
			}
		},
		created() {
			this.initDate()
		},
		methods:{
			open() {
				console.log("打开")
				this.$refs.popup.open()
			},
			
			close() {
				this.$refs.popup.close()
			},
			
			initDate(){
				let dayDATA=this.$dayjs()
				let YM = dayDATA.format('YYYY-MM')+'-01'
				let first_week = this.$dayjs(YM).day()
				let daysInMonth = dayDATA.daysInMonth()
				let nowDay = dayDATA.date()
				for (let i=0;i<first_week;i++) {
					this.DateList.push({
						text:'',
						value:null
					})
				}
				for (let i=0;i<daysInMonth;i++) {
					this.DateList.push({
						text:i+1,
						value:i+1
					})
				}
			},
			
			
			checkDay(item,i){
				let value = this.dateVlaue
				
				let valLength = this.dateVlaue.length
				
				if(valLength<2){
					if(i>this.dateVlaue[0]){
						// if(i-this.dateVlaue[0]>4){
						// 	uni.showToast({
						// 		title:'最多选择5天',
						// 		icon:'none'
						// 	})
						// }else{
							this.dateVlaue.push(i)
						// }
					}else{
						// if(this.dateVlaue[0]-i>4){
						// 	uni.showToast({
						// 		title:'最多选择5天',
						// 		icon:'none'
						// 	})
						// }else{
							this.dateVlaue=[i,...this.dateVlaue]
						// }
					}
					
					// this.dateVlaue.push(i)
				}else{
					this.dateVlaue = [i]
				}
				
				// this.dateVlaue = value
			},
			
			confirm(){
				let starttime = this.$dayjs().format('YYYY-MM')+'-'+(this.dateVlaue[0]+1 > 9 ? this.dateVlaue[0]+1 : '0'+(this.dateVlaue[0]+1))
				let endtime = this.$dayjs().format('YYYY-MM')+'-'+(this.dateVlaue[1]+1 > 9 ? this.dateVlaue[1]+1 : '0'+(this.dateVlaue[1]+1))
				this.$emit('confirmTime',starttime+','+endtime)
				this.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-wrap {
		padding: 36rpx 24rpx 40rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.title{
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
			text-align: center;
			position: relative;
			image{
				position: absolute;
				right: 0;
				top: 0;
				width: 32rpx;
				height: 32rpx;
			}
		}
		// image {
		// 	width: 100%;
		// 	height: 100%;
		// }
		
		.btn-box{
			padding: 30rpx 0 0;
			button{
				width: 100%;
				height: 96rpx;
				background: linear-gradient( 135deg, #FFA233 0%, #FB4C4C 100%);
				border-radius: 80rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 96rpx;
				text-align: center;
			}
		}
	}
	
	.old-time{
		padding: 20rpx 22rpx;
		box-sizing: border-box;
		.title{
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
			line-height: 48rpx;
		}
		.value{
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
			margin-top: 20rpx;
		}
	}
	
	.select-date{
		padding: 0;
		// border-top: 20rpx solid #F8F8F8;
		.title{
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
			padding: 32rpx 22rpx 0;
		}
		.week-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			.w-i{
				width: calc(100% / 7 - 12rpx);
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				line-height: 44rpx;
				// margin: 0 22rpx;
				text-align: center;
			}
		}
		.date-item{
			display: flex;
			flex-wrap: wrap;
			margin-top: 2rpx;
			padding: 0 0rpx;
			box-sizing: border-box;
			.item{
				width: calc(100% / 7 - 12rpx);
				padding-bottom: calc(100% / 7 - 12rpx);
				margin: 10rpx 6rpx 0;
				position: relative;
				border-radius: 16rpx;
				text{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translateX(-50%) translateY(-50%);
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}
				
				&.select{
					background-color: #E72A2A;
					text{
						color: #FFFFFF;
						font-weight: 800;
					}
					
				}
				&.s_start{
					position: relative;
					&::before{
						display: block;
						width: 56rpx;
						content:'开始';
						position: absolute;
						font-weight: 800;
						font-size: 26rpx;
						color: #FFFFFF;
						line-height: 36rpx;
						text-align: center;
						bottom: 1rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
				&.s_end{
					position: relative;
					&::before{
						display: block;
						width: 56rpx;
						content:'结束';
						position: absolute;
						font-weight: 800;
						font-size: 26rpx;
						color: #FFFFFF;
						line-height: 36rpx;
						text-align: center;
						bottom: 1rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
				&.s_center{
					background-color: #FFF2F2;
				}
				&.disabled{
					text{
						color: #999999;
					}
				}
			}
			
		}
	}
</style>